<template>
  <div>
    <!-- 头部导航 -->
    <headerNav></headerNav>

    <!-- 导航按钮 -->
    <navs></navs>

    <!-- 全部 -->
    <div class="playlistMore">
      <div class="title">
        <h3>全部</h3>
      </div>

      <div class="recommendplaylist">
        <div class="content">
          <ul>
            <router-link
              v-for="item in resAll"
              :key="item.id"
              tag="li"
              :to="'/recommend/playlistMorelist?id=' + item.id"
              class="li"
            >
              <!-- <li > -->
              <div class="img">
                <img :src="item.picUrl" alt="" />
              </div>

              <p>{{ item.name }}</p>
              <span
                ><i class="iconfont icon-icon-headset"></i
                >{{ item.playCount | playCountData }}</span
              >
              <!-- </li> -->
            </router-link>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerNav from "../../components/base/headerNav.vue";
import navs from "../../components/base/navs.vue";

import { getAllPersonalizedr } from "../../api/recommend";

export default {
  components: { headerNav ,navs },
  data() {
    return {
      resAll: null,
    };
  },
  methods: {
    getAllPersonalizedrFun() {
      getAllPersonalizedr().then((data) => {
        console.log(data);
        this.resAll = data.result;
      });
    },
  },
  created() {
    this.getAllPersonalizedrFun(); //全部获取推荐歌单
  },

  // 过滤器
  filters: {
    playCountData(value) {
      let tenThousand = value > 10000 ? value / 10000 : value; // 万计算
      let billion =
        tenThousand > 10000
          ? parseInt(value / 10000) + "亿"
          : parseInt(tenThousand) + "万"; //亿计算
      return billion;
    },
  },
};
</script>

<style lang="less">
.playlistMore {
  .title {
    margin: 10px;
    padding-bottom: 5px;
    border-bottom: 3px solid #d44439;
    h3 {
      font-size: 20px;
    }
  }

  .recommendplaylist {
    padding-bottom: 100px;
    .content {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .li {
          flex: 0 0 32%;
          position: relative;
          margin-top: 10px;
          .img {
            background-color: cornflowerblue;
            min-height: 50px;
            width: 100%;
            border-radius: 3px;
            img {
              width: 100%;
              border-radius: 3px;
            }
          }
          p {
            font-size: 12px;
            color: #565658;
            line-height: 15px;
            padding: 5px;
            margin-bottom: 10px;
            display: -webkit-box;
            // 1、固定宽度（高度可有可无）：width: 195px;
            // 2、把盒子转成弹性伸缩盒子：
            // 3、弹性盒子排列方式：垂直排列：
            -webkit-box-orient: vertical;
            // 4、规定显示几行文本：
            -webkit-line-clamp: 2;
            // 5、溢出隐藏：
            overflow: hidden;
            padding-bottom: 0;
            letter-spacing: 1px;
          }
          span {
            position: absolute;
            top: 0;
            right: 0;
            color: #fff;
            font-size: 10px;
            i {
              margin-right: 4px;
              font-size: 15px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>